<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="box">
        点击

    </button>
    <script>
        const btn = document.querySelector('.box')
        btn.addEventListener('click', debounce(handle,1000))
        function handle(){
            console.log(111,this)//this指向btn
        }
        function debounce(fn,delay){
            let timer=null//闭包用于保存定时器，防止每次点击都创建新的定时器
            return function(...args){//该函数拥有事件参数e，但handle没有了,所以要把参数给fn执行
                if(timer){//如果上一个定时器存在，则清除
                    clearTimeout(timer)
                }
                timer=setTimeout(()=>{
                    fn.apply(this,args)
                    //apply作用是将handle函数的this重新指向当前被addEventListener调用的function函数的this
                    //也就是handle原来的this
                },delay)
            }
        }
    </script>
</body>
</html>